:root {
    font-size: 15px;
}

body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif; /* 确保全局字体一致 */
}

#root {
    max-width: 1280px;
    margin: 0 auto;
    padding: 2rem;
    text-align: center;
    position: relative;
    z-index: 1; /* 确保内容在背景之上 */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh; /* 使内容垂直居中 */
}

.logo {
    height: 6em;
    padding: 1.5em;
    will-change: filter;
    transition: filter 300ms;
}
.logo:hover {
    filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.react:hover {
    filter: drop-shadow(0 0 2em #61dafbaa);
}

.read-the-docs {
    color: #888;
}

.card {
    margin: 20px;
}

button {
    font-size: 16px;
    padding: 10px 20px;
    margin: 10px;
    cursor: pointer;
}

.nav-button {
    display: inline-block;
    padding: 20px 20px; /* 增加按钮高度 */
    text-align: center;
    color: #fff;
    font-size: 24px;
    text-decoration: none;
    font-family: sans-serif;
    background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
    border-radius: 30px;
    background-size: 400% auto; /* 将背景放大400% */
    position: relative; /* 为伪元素定位 */
    z-index: 0; /* 确保伪元素在其后面 */
}

.nav-button::before {
    content: "";
    position: absolute;
    inset: -5px;
    z-index: -1;
    background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
    background-size: 400%;
    border-radius: 40px;
    opacity: 0;
    transition: opacity 0.5s, filter 0.5s; /* 添加过渡效果 */
}

.nav-button:hover::before {
    filter: blur(20px);
    opacity: 1;
    animation: animate 8s linear infinite;
}

@keyframes animate {
    from {
        background-position: 8%;
    }
    to {
        background-position: 400%;
    }
}

